<template>
  <el-select v-model="value" class="m-0" :placeholder="placeholder" size="small" @change="advancedSelect">
    <el-option v-for="item in options" :key="item.value ? item.value : item.id" :label="item.text ? item.text : item.name"
      :value="item.value ? item.value : item.id">
    </el-option>
  </el-select>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue'

export default defineComponent({
  components: {},
  emits: {
    changeValue: null,
  },
  props: {
    options: {
      type: Object,
      required: true,
    },
    placeholder: {
      type: String,
    }
  },
  model: {
    prop: 'value',
    event: 'changes',
  },
  setup(props, { emit }) {
    // let optionList: any = {
    //   ...props.options
    // }
    type Option = {
      id: number
      text: string
      value: string
    }
    const value = ref<Option>()
    // 监听数据发生变化
    let dataList: any = ref(props.options)
    watch(
      () => props.options,
      (newVal) => {
        changeList(newVal)
      }
    )
    const changeList = (value) => {
      dataList.value = value
    }

    const advancedSelect = (value) => {
      let list = JSON.parse(JSON.stringify((dataList.value)))
      for (let key in list) {
        if (value == list[key].value || value == list[key].id) {
          emit('changeValue', list[key])
        }
      }

    }

    return {
      advancedSelect,
      value,
      dataList
    }
  },
})
</script>

<style scoped lang="scss"></style>
